<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-07-13 09:20:15
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-08-06 15:16:13
-->
<template>
  <div class="header">
    <div class="header_white">
      <ul class="menu">
        <li class="menu_item">
          <a>
            <svg
              style="margin-top: 0.2em"
              t="1628169548505"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2210"
              width="15"
              height="15"
            >
              <path
                d="M950.3 489.4L533.8 73c-12-12-31.5-12-43.5 0L73.9 489.4c-19.4 19.4-5.7 52.5 21.7 52.5h66.8v353.7c0 35.3 28.7 64 64 64H384V831.8c0-35.3 28.7-64 64-64h128c35.3 0 64 28.7 64 64v127.8h156.6c35.3 0 64-28.7 64-64V541.9h67.8c27.5 0 41.2-33.2 21.9-52.5z"
                fill="#d81e06"
                p-id="2211"
              ></path>
            </svg>
            首页</a
          >
        </li>
        <li class="menu_item">
          <a href=""
            >时政
            <svg
              t="1628169888506"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2968"
              width="15"
              height="15"
            >
              <path
                d="M499.8 707.3L219.3 426.8c-10.8-10.8-10.8-28.4 0-39.2 10.8-10.8 28.4-10.8 39.2 0l261.1 261.1 261.1-261.1c10.8-10.8 28.4-10.8 39.2 0 10.8 10.8 10.8 28.4 0 39.2L539.4 707.3c-5.4 5.4-12.6 8.1-19.8 8.1-7.1 0-14.3-2.7-19.8-8.1z"
                fill="#263554"
                p-id="2969"
              ></path>
            </svg>
          </a>
          <ul class="sub_menu">
            <li><a href="">人民领袖习近平</a></li>
            <li><a href="">联播+</a></li>
            <li><a href="">中国领导人</a></li>
          </ul>
        </li>
        <li class="menu_item"><a href="">新闻</a></li>
        <li class="menu_item"><a href="">视频</a></li>
        <li class="menu_item"><a href="">经济</a></li>
        <li class="menu_item"><a href="">评论</a></li>
        <li class="menu_item"><a href="">奥运</a></li>
        <li class="menu_item"><a href="">军事</a></li>
        <li class="menu_item"><a href="">熊猫频道</a></li>
        <li class="menu_item"><a href="">直播中国</a></li>
        <li class="menu_item">
          <a href=""
            >超高清
            <svg
              t="1628169781646"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2087"
              width="15"
              height="15"
            >
              <path
                d="M0 256h1024v512H0V256z m194.24 155.52V640h37.44V538.88h115.84V640h37.44V411.52h-37.44v95.36H231.68v-95.36h-37.44z m336.96-4.48c-35.2 0-62.72 11.2-82.56 34.24-19.2 21.76-28.48 49.92-28.48 84.8 0 34.56 9.28 62.72 28.48 84.48 19.84 22.4 47.36 33.92 82.56 33.92 34.88 0 62.4-11.2 82.56-33.6 19.2-21.44 28.8-49.6 28.8-84.8 0-35.2-9.6-63.68-28.8-85.12-20.16-22.72-47.68-33.92-82.56-33.92z m0 32.96c23.68 0 41.92 7.36 54.72 22.72 12.48 15.36 18.88 36.48 18.88 63.36 0 26.88-6.4 47.68-18.88 62.72-12.8 15.04-31.04 22.72-54.72 22.72s-42.24-8-55.04-23.68c-12.48-15.36-18.56-35.84-18.56-61.76 0-26.24 6.08-46.72 18.56-62.08 13.12-16 31.36-24 55.04-24z m128.96-28.48v32h74.88V640h37.44V443.52h74.88v-32h-187.2z"
                fill="#d81e06"
                p-id="2088"
              ></path>
            </svg>
            <svg
              t="1628169888506"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2968"
              width="15"
              height="15"
            >
              <path
                d="M499.8 707.3L219.3 426.8c-10.8-10.8-10.8-28.4 0-39.2 10.8-10.8 28.4-10.8 39.2 0l261.1 261.1 261.1-261.1c10.8-10.8 28.4-10.8 39.2 0 10.8 10.8 10.8 28.4 0 39.2L539.4 707.3c-5.4 5.4-12.6 8.1-19.8 8.1-7.1 0-14.3-2.7-19.8-8.1z"
                fill="#263554"
                p-id="2969"
              ></path>
            </svg>
          </a>
          <ul class="sub_menu">
            <li><a href="">4K专区</a></li>
            <li><a href="">VR沉浸</a></li>
            <li><a href="">互动直播</a></li>
          </ul>
        </li>
        <li class="menu_item">
          <svg
            t="1628169949615"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="3173"
            width="15"
            height="20"
          >
            <path
              d="M531.185456 943.532317c0 8.899694-6.493901 16.114003-14.503319 16.114003l-9.364275 0c-8.010441 0-14.504342-7.214309-14.504342-16.114003L492.81352 80.46666c0-8.898671 6.493901-16.114003 14.504342-16.114003l9.364275 0c8.009418 0 14.503319 7.215332 14.503319 16.114003L531.185456 943.532317z"
              p-id="3174"
              fill="#2c2c2c"
            ></path>
          </svg>
        </li>
        <li class="menu_item">
          <a href=""
            >CCTV.直播
            <svg
              t="1628169888506"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2968"
              width="15"
              height="15"
            >
              <path
                d="M499.8 707.3L219.3 426.8c-10.8-10.8-10.8-28.4 0-39.2 10.8-10.8 28.4-10.8 39.2 0l261.1 261.1 261.1-261.1c10.8-10.8 28.4-10.8 39.2 0 10.8 10.8 10.8 28.4 0 39.2L539.4 707.3c-5.4 5.4-12.6 8.1-19.8 8.1-7.1 0-14.3-2.7-19.8-8.1z"
                fill="#263554"
                p-id="2969"
              ></path>
            </svg>
          </a>
          <ul class="sub_menu">
            <li><a href="">直播</a></li>
            <li><a href="">看点</a></li>
            <li><a href="">栏目</a></li>
          </ul>
        </li>
      </ul>
    </div>

    <div class="header_black">
      <div class="logo"><img src="http://39.103.160.49/ku/pic/logo210806.png" alt="" /></div>
      <ul class="menu" style="width:800px">
        <router-link to="/home"> <li class="menu_item" style="color: #bf0614">新闻</li></router-link>
        <router-link to="/guonei"> <li class="menu_item"><a href="" style="color: #fff">国内</a></li></router-link>
        <router-link to="/kuaikan"> <li class="menu_item"><a href="" style="color: #fff">国际</a></li></router-link>
        <router-link to="/shehui"><li class="menu_item"><a href="" style="color: #fff">社会</a></li></router-link>
        <router-link to="/fazhi"> <li class="menu_item"><a href="" style="color: #fff">法制</a></li></router-link>
        <li class="menu_item"><a href="" style="color: #fff">图片</a></li>
        <li class="menu_item"><a href="" style="color: #fff">文娱</a></li>
        <li class="menu_item"><a href="" style="color: #fff">科技</a></li>
        <li class="menu_item"><a href="" style="color: #fff">生活</a></li>
        <li class="menu_item"><a href="" style="color: #fff">人物</a></li>
        <li class="menu_item"><a href="" style="color: #fff">军事</a></li>
        <li class="menu_item"><a href="" style="color: #fff">快看</a></li>

        <li class="menu_item">
          <a href="" style="color: #fff">更多</a>
          <ul class="sub_menu">
            <li><a href="">经济</a></li>
            <li><a href="">书画</a></li>
            <li><a href="">教育</a></li>
          </ul>
        </li>
        <li class="menu_item">
          <a href="" style="color: #fff">原创</a>
          <ul class="sub_menu">
            <li><a href="">联播+</a></li>
            <li><a href="">热解读</a></li>
            <li><a href="">央视快评</a></li>
          </ul>
        </li>
        <li class="menu_item">
          <a href="" style="color: #fff">直播</a>
          <ul class="sub_menu">
            <li><img src="http://39.103.234.63/images/cctv1.png" alt="" class="cctv" /></li>
            <li><img src="http://39.103.234.63/images/cctv2.png" alt="" class="cctv" /></li>
            <li><img src="http://39.103.234.63/images/cctv4.png" alt="" class="cctv" /></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>
<style scoped>
body {
  margin: 0 0 0 0;
  width: 100%;
  overflow-x: hidden;
}
a {
  color: #333;
  text-decoration: none;
  display: block;
}

.header_white {
  margin-top: 0;
  padding: 0, 0;
  height: 40px;
  background: #fff;
  margin-left: 160px;
  width: 100%;
}
ul,
p {
  position: absolute;
  margin: 0;
  padding: 0;
  float: none;
}
.header_white .menu .menu_item {
  margin-right: 10px;
  float: left;
  list-style: none;
  text-align: center;
  margin: 10px;
  position: right;
}
.header_white .menu > .menu_item:hover .sub_menu {
  display: block;
  text-align: left;
  margin: 5px;
  z-index: 999;
  position: absolute;
  border-radius: 5px;
}
.header_white .menu .sub_menu {
  display: none;
  list-style: none;
  width: 180px;
  background: #fff;
}
.header_black {
  background: #333333;
  height: 65px;
}
.header_black .logo {
  position: absolute;
  background: #bf0614;
  width: 179px;
  height: 76px;
  z-index: 10;
  margin-left: 150px;
}
.header_black .hb .hb_item {
  margin-right: 10px;
  float: left;
  list-style: none;
  text-align: center;
}
.header_black .menu > .menu_item:hover .sub_menu {
  display: block;
  text-align: left;
  margin: 5px;
  border-radius: 5px;
}
.header_black .menu .sub_menu {
  display: none;
  list-style: none;
  width: 180px;
  background: #fff;
}
.header_black .menu {
  margin-left: 350px;
  top: 52px;
  color: #fff;
}
.header_black .menu .menu_item {
  margin-right: 100px;
  float: left;
  list-style: none;
  text-align: center;
  margin: 10px;
  position: right;
}
.header_black .a {
  color: #fff;
}
.header_black .menu .menu_item > .a:hover {
  color: #bf0614;
}
.content {
  height: 1500px;
  width: 100%;
  background: teal;
  z-index: -1;
}
.footer {
  position: relative;
  margin-bottom: 0px;
  width: 100%;
  height: 110px;
  bottom: 0;
  left: 0;
  background: #272727;
}
.footer .table {
  margin-top: 35px;
  margin-left: 100px;
  position: absolute;
  color: #8c8c8c;
  font-size: 12px;
  width: 680px;
}
.footer .table1 {
  position: absolute;
  margin-top: 35px;
  right: 35px;
  font-size: 12px;
  color: #cacaca;
}
.footer1 {
  height: 200px;
  width: 100%;
  background: #333333;
}
.footer1 .footer_menu .footer_item {
  float: left;
  color: #bf0614;
  font-weight: 900;
  font-size: 20px;
  list-style: none;
  margin-top: 28px;
  margin-left: 210px;
}
.footer1 .footer_menu .footer_item .footer_a {
  list-style: none;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  margin-top: 15px;
}
.footer1 .footer_menu .footer_item .item_a {
  list-style: none;
  float: left;
  color: #000;
  font-size: 15px;
  display: balock;
}
.footer1 .footer_menu .footer_item .footer_tab {
  float: left;
  font-weight: 500;
  list-style: none;
  margin: 2px;
  color: #fff;
  font-size: 12px;
  word-break: break-all;
}
</style>
